<template>
  <div class="h-full w-full flex flex-row justify-center items-center">
    <span :style="{color:nodeData?.color}">{{ nodeData?.text || '请输入文字' }}</span>
    <el-dialog title="编辑管道" :model-value="isRevealed" show-close append-to-body @close="handleClose">
      <el-form :model="formData" label-width="auto" label-position="left">
        <el-form-item label="显示文字">
          <el-input v-model="formData.text"></el-input>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="formData.color"></el-color-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button type="info" @click="handleClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { inject, ref } from 'vue'
import { type Graph, Node } from '@antv/x6'
import { ElButton, ElDialog, ElForm } from 'element-plus'
import { useConfirmDialog } from '@vueuse/core'

const getNode = inject('getNode') as () => Node
const getGraph = inject('getGraph') as () => Graph

const node = getNode()
const graph = getGraph()

const nodeData = ref(node.getData())
node.removePorts()


const { isRevealed, confirm, reveal, cancel, onConfirm, onReveal } = useConfirmDialog()

node.on('change:data', ({ current }) => {
  reveal(current)
})

const formData = ref<{
  text: string,
  color: string
}>(node.getData())

onReveal((data) => {
  formData.value = data
})

onConfirm((data) => {
  nodeData.value = data
  node.setData(data, { silent: true })
})

const handleClose = function() {
  cancel()
  node.setData({
    dialog: false
  }, { silent: true })
}
const handleConfirm = function() {
  console.log('confirm')
  confirm(node.getData())
}
</script>

<style scoped lang="scss">

</style>
